import React, {Component, ComponentClass} from 'react';
import {AtRate} from "taro-ui";
import Taro from '@tarojs/taro';
import {Block, Image, Text, View} from "@tarojs/components";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {h5Wx} from "../../utils/h5.service";
import {http} from "../../utils/http";
import {ShopList} from "../../utils/server.interface";
import {RESOURCE_URL} from "../../constants/api";
import './index.scss'

class Index extends Component {
  state: {
    list: any
  } = {
    list: []
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    this.getListDate()
  }

  page = 1
  total = 0
  length = 10

  async onReachBottom() {
    if (this.total !== this.state.list.length) {
      const old = this.state.list
      this.page++
      const newData = await this.getList()
      if (newData) {
        this.setState({list: [...old, ...newData]})
      }
    }
  }

  async getListDate() {
    this.page = 1
    const list = await this.getList()
    this.setState({list})
  }

  async getList() {
    Taro.showLoading({title: '加载中...'});
    const params = {
      page: this.page,
      size: 10,
    }
    const res = await http.HGet<ShopList[]>('/msvc-shop/v1/goodsEvaluation/myEvaluate', params)
    if (res) {
      Taro.hideLoading()
      this.total = res.totalRows
      return res.data
    } else {
      Taro.hideLoading()
      return false
    }
  }

  jump(uuid, type, is_sale) {
    if (is_sale != 1) {
      Taro.showToast({
        title: '该商品已下架~',
        icon: 'none'
      });
      return
    }
    let url = ''
    if (type == 0) {
      url = '/common/limited/detail?itemId='
    } else if (type == 1) {
      url = '/common/scenic/detail?itemId='
    } else if (type == 2) {
      url = '/common/hotel/detail?itemId='
    } else if (type == 3) {
      url = '/common/tourist-line/detail?itemId='
    } else if (type == 4) {
      url = '/common/product/detail?itemId='
    }
    Taro.navigateTo({
      url: url + uuid
    })
  }

  render() {
    const {
      list,
    } = this.state
    return (
      <View className='evaluation'>
        <GzhAuth />
        {list && list.length > 0 && list.map((item, index) =>
          <View className='evaluation-box' key={index}
            onClick={this.jump.bind(this, item.goods.uuid, item.comment.type, item.goods.is_sale)}
          >
            <View className='evaluation-item'>
              <View className='title'>{item.comment.content}</View>
              <View className='score'>
                {item.comment.star && Number(item.comment.star) > 0 && <Block>
                  <View>商家评分</View>
                  <AtRate
                    className={`star-rate ${process.env.TARO_ENV !== 'h5' ? 'star-rate-weapp' : ''}`}
                    value={+Number(item.comment.star).toFixed(1)}
                    size={14}
                  />
                </Block>}
              </View>
              <View className='good-info'>
                <Image className='good-info-image' mode='aspectFill'
                  src={RESOURCE_URL + item.goods.poster_background}
                />
                <View className='good-info-title'>
                  <View className='good-info-title-main'>{item.goods.name}</View>
                  <View className='good-info-title-other'></View>
                </View>
              </View>
              <View className='through-line' />
              <View className='time'>{item.comment.add_date}</View>
            </View>
          </View>)}
        {list.length == 0 && <View className='listNull'>
          <Image src={`${RESOURCE_URL}/resources/images/carnull.png`} mode='widthFix' />
          <View className='text'>评价列表空空如也，<Text>去逛逛吧~</Text></View>
        </View>}
      </View>
    )
  }
}


export default Index as ComponentClass
